<template>
<div>
    <h2 class="sub-header">Edit Hero</h2>
    <form>
        <div class="form-group">
            <label for="exampleInputEmail1">姓名</label>
            <input  class="form-control" id="exampleInputEmail1"
            placeholder="姓名" value="xxx"
            v-model="formdata.name">
          </div>
            <div class="form-group">
                <label for="exampleInputPassword1">性别</label>
                <input  class="form-control"
                id="exampleInputPassword1" placeholder="性别" value="xxx"
                v-model="formdata.gender">
          </div>


                <button type="submit" class="btn btn-success"
                @click.prevent="editHero()">Submit</button>
    </form>

</div>
</template>

<script>
// import axios from 'axios'

export default {
  mounted() {
    this.getHeroByID()
  },
  data() {
    return {
      formdata: {
        name: '',
        gender: ''
      }
    }
  },
  // id->axios.get()->data formdata -> v-model
  methods: {
    // 编辑英雄
    editHero() {
      // var url = 'http://localhost:3004/heroes/'

      // axios.put
      this.$http
        .put('heroes/' + this.$route.params.id, this.formdata)
        .then(res => {
          // 回到列表页
          this.$router.push('/list')
        })
    },
    // 根据id查询影响
    getHeroByID() {
      // 在js中获取动态路由参数值
      // this.$route.params.id
      // console.log(this.$route.params.id)
      this.$http.get('heroes/' + this.$route.params.id).then(res => {
        // res.data
        this.formdata = res.data
        // console.log(this.formdata)
      })
    }
  }
}
</script>

<style>
</style>


// 处理表单数据
